<!DOCTYPE html>
<title>Tests that server-side image maps with zooms and transforms produce the right click coordinates.</title>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
img {
    position: absolute;
    left: 50px;
    top: 60px;
    width: 100px;
    height: 50px;
    border-left: 13px solid;
    border-top: 13px solid;
    border-right: 10px solid;
    border-bottom: 10px solid;
    padding-left: 17px;
    padding-top: 17px;
    padding-right: 10px;
    padding-bottom: 10px;
    transform: rotate(45deg);
}
</style>
<div style="zoom: 2;"><a href="#"><img src="" ismap></a></div>
<script>
async_test(function(t) {
    window.onload = t.step_func_done(function() {
        function testClick(x, y, expectedHash) {
            location.hash = '#';
            eventSender.mouseMoveTo(x, y);
            eventSender.mouseDown();
            eventSender.mouseUp();
            assert_equals(location.hash, expectedHash);
        }
        if (window.testRunner) {
            internals.setPageScaleFactor(1.25); // pinch scale
            testRunner.setPageZoomFactor(1.5, 0, 0); // browser zoom
            testClick(402, 122, '#?0,0'); // top left border
            testClick(407, 204, '#?0,0'); // top left padding
            testClick(517, 562, '#?82,39'); // content area
            testClick(539, 662, '#?105,54'); // lower right padding
            testClick(540, 714, '#?115,63'); // lower right border
            testClick(179, 350, '#?0,63'); // lower left border
            testClick(248, 362, '#?0,52'); // lower left padding
            testClick(695, 488, '#?102,0'); // upper right padding
            testClick(759, 479, '#?112,0'); // upper right border
        }
    });
});
</script>
